<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>母鸡下蛋动画</title>
</head>
<body>

    <main>
        <section >
            <div >
                <h2>动画演示</h2>
                
                <!-- 动画画布 -->
                <div >
                    <canvas id="animationCanvas" width="800" height="600"></canvas>
                      <script src="hen-egg-animation.js"></script>
                    <!-- 控制面板 -->
                    <div >
                        <div>鸡蛋数量: <span id="eggCount">0/3</span></div>
                        <div>下蛋次数: <span id="layCount">0</span></div>
                        <div>状态: <span id="status">准备中</span></div>
                    </div>
                    <div>
                        <button id="startBtn" >开始下蛋</button>
                        <button id="resetBtn" >重置</button>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div>
                <h2 >关于动画 </h2>
                <div >
                    <div>
                        <h3 >动画原理 </h3>
                        <p >
                            这个动画使用HTML5 Canvas技术实现，通过JavaScript控制母鸡移动和下蛋的动画效果。母鸡会从左侧走到鸡窝，蹲下并产下一个随机颜色的鸡蛋。
                        </p>
                        <p>
                            鸡蛋颜色有白色、黄色和黑色三种，每次下蛋时会随机选择一种颜色。鸡窝最多可以容纳3个鸡蛋，达到上限后母鸡将停止下蛋，直到你点击重置按钮。
                        </p>
                    </div>
                    <div>
                        <h3>如何操作</h3>
                        <ul >
                            <li>
                                <span>点击"开始下蛋"按钮，母鸡会移动到鸡窝并开始下蛋</span>
                            </li>
                            <li>
                                <span>每次下蛋后，母鸡会回到初始位置，稍作休息后再次下蛋</span>
                            </li>
                            <li>
                                <span>当鸡窝中有3个鸡蛋时，母鸡会停止下蛋</span>
                            </li>
                            <li>
                                <span>点击"重置"按钮可以清空鸡窝，重新开始下蛋过程</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

</body>
</html>
    